<template>
	<view class="cu-form-group">
		<view class="title">标题</view>
		<input placeholder="请输入标题" name="input" @input="handletext" :value="DAT.XX_BT" />
	</view>
	<view class="cu-form-group margin-top">
		<textarea maxlength="-1" auto-height :value="DAT.XX_TXT" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
	</view>
	<view class="formdata">
		<view class="formdata-item">
			<view class="text">
				<text>状态</text>
			</view>
			<view class="input">
				<view class="isopinion-info">
					<radio-group @change="onSelectStatus">
						<view class="">
							<view>
								<label class="text-sm">启用</label>
								<radio
										:class="['radio','blue',DAT.STATE === '1' ? 'checked' : '']"
										:checked="DAT.STATE === '1'"
										value="1"
										style="transform: scale(0.8)"
								>
								</radio>
					
								<label class="text-sm">停用</label>
								<radio
										:class="['radio','blue',curSelectStatus === '0' ? 'checked' : '']"
										:checked="DAT.STATE === '0'"
										value="0"
										style="transform: scale(0.8)"
								>
								</radio>
							</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
	<view class="cu-bar bg-white margin-top">
		<view class="action">
			图片上传
		</view>
		<view class="action">
			{{imgList.length}}/9
		</view>
	</view>
	<view class="cu-form-group">
		<view class="grid col-4 grid-square flex-sub">
			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			 <image :src="imgList[index]" mode="aspectFill" v-if="imgList.length"></image>
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<view class="solids" @tap="ChooseImage" v-if="imgList.length<9">
				<text class='cuIcon-cameraadd'></text>
			</view>
		</view>
	</view>
	<view class="submit">
		<button class="cu-btn bg-blue shadow-blur radius" @tap="uploadSubmit()">提交{{name}}</button>
	</view>
</template>

<script lang="ts" setup>
	import {ref,onMounted} from "vue"
	import {onLoad} from "@dcloudio/uni-app";
	import {useAnnouncementTitleDetail} from "./useAnDetali"
	const {BASE_URL,initUploadimage,initAnnouncementTitleDetail}:any  = useAnnouncementTitleDetail()
	const DAT= ref<any>({})
	const name = ref<any>("")
	const imgList =  ref<any>([])
	const SchoolImageList = ref<any>([])
	const OldSchoolImageList = ref<any>([])
	const Deteimages =  ref<any>([])
	function handletext(e){
		DAT.value.XX_BT = e.detail.value
	}
	let timer = null
	function textareaAInput(e){ //实现防抖
		clearTimeout(timer)
		timer = setTimeout(()=>{
			DAT.value.XX_TXT = e.detail.value
		},500)
	}
	function ViewImage(e) {
		uni.previewImage({
			urls: imgList.value,
			current: e.currentTarget.dataset.url
		})
	}
	function DelImg(e) {
		
		uni.showModal({
			title: '提示消息',
			content: '确定要删除吗？',
			cancelText: '再想想',
			confirmText: '删除',
			success: res => {
				if (res.confirm) {
					Deteimages.value.push(imgList.value[e.currentTarget.dataset.index])
					imgList.value.splice(e.currentTarget.dataset.index, 1)
				}
			}
		})
	}
	function ChooseImage() {
			uni.chooseImage({
				count: 9 - imgList.value.length, //默认9
				sizeType:['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					if (imgList.value.length != 0) { 
						//如果已有图片拼接新旧数组
						imgList.value =imgList.value.concat(res.tempFilePaths) 
					} else {
						//如果没有直接赋值
						imgList.value = res.tempFilePaths
					}
				}
			});
	}
	function onSelectStatus(e){
		DAT.value.STATE= e.detail.value
	}
	function uploadSubmit(){
		uni.showModal({
			title: '提示消息',
			content: '您确定提交吗',
			success: res => {
				if(res.confirm){
					let Oldimgs = Array() //没有改变的图片
					let Newimgs = Array() //新增加的图片
					let Deimages = Array() //删除的图片
					for(let i =0;i<imgList.value.length;i++){
						if(OldSchoolImageList.value.indexOf(imgList.value[i])!=-1){
							Oldimgs.push(imgList.value[i].slice(imgList.value[i].indexOf("=")+1,imgList.value[i].length))
						}else{
							Newimgs.push(imgList.value[i])
						}
					}
					for(let i =0;i<Deteimages.value.length;i++){
						if(Deteimages.value[i].split("=")[1]!=undefined){
							Deimages.push(Deteimages.value[i].split("=")[1])
						}
					}
					let Params = {
						STATE:DAT.value.STATE,
						XX_BT:DAT.value.XX_BT?DAT.value.XX_BT:"",
						XX_TXT:DAT.value.XX_TXT?DAT.value.XX_TXT:"",
						XX_ID:DAT.value.XX_ID,
						Oldimgs:Oldimgs,
						Newimgs:Newimgs,
						Deteimages:Deimages
					}
					initUploadimage(Params)
				}
			},
			fail: () => {},
			complete: () => {}
		})
	}
	onLoad((option:any)=>{
		//是否为新增，修改
		if(option.XX_ID!=0){
			name.value = "修改"
			initAnnouncementTitleDetail(option.XX_ID)
			.then(res=>{
				DAT.value = res.DAT[0]
				if(DAT.value.XX_PIC!=""){
					SchoolImageList.value = DAT.value.XX_PIC.split(";")
					let List = Array()
					for(let i = 0;i<SchoolImageList.value.length;i++){
						List.push(BASE_URL + "/pic_server/browse?picfilename=" +SchoolImageList.value[i])
					}
					OldSchoolImageList.value = List
					imgList.value = List
				}
			})
		}else{
			name.value = "信息"
			uni.setNavigationBarTitle({
			  title: "新增公告信息"
			})
			DAT.value.XX_ID = option.XX_ID
			DAT.value.STATE = "1"
		}
	})
</script>

<style lang="scss">
	.formdata {
		background-color: white;
		.formdata-item {
			padding: 0 32rpx 0 32rpx;
			border-bottom: 4rpx #F7F8FC solid;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text {
				margin-right: 32rpx;
			}
		}
	}
	.submit{
		position: fixed;
		bottom: 20rpx;
		margin-left: 40%;
	}
</style>